<template>
<!-- 视图层 -->
  <div id="app">
    <!-- 插值表达式:将下面导出的data插入到上面 -->
    <h3>{{obj.h3}}{{obj.h2}}</h3>
    <h1>年龄:{{ msg }}</h1>
    <h1>性别:{{ gender }}</h1>
    <h2>姓名:{{ obj.h1 }}</h2>
  </div>
</template>

<script>
export default {
  name:"pigHu",
  // 数据层   数据驱动视图改变
  // 设计模式  设计模式是对代码分层,引入一种架构的概念
  // MVVM好处   减少DOM操作,提高开发效率
  data() {    //data是一个函数 里面有一个return 返回一个对象
    return {
      msg: "胡文帅是猪",
      gender: "Supermen",
      obj: {
        h1: "是猪",
        h2: "data是一个函数",
        h3:"我是插值表达式"
      },
    };
  },
};
</script>

<style>


</style>
